<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>OJ 题目详情</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>

        <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
            <a class="navbar-brand font-weight-bold" href="#">题目详情</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="topMenu">

            </div>
            <a class="navbar-brand font-weight-bold" href="index.html">主页</a>
                <a class="navbar-brand font-weight-bold" href="javascript:void(0);"  onclick=logout()>注销</a>

        </nav>

        <!--components-->
      
        <section class="my-5 pt-5">
            <div class="container">
                <!-- Jumbotron  -->
                <br>
                <br>

                <h2>题目详情</h2>
                <br>
                <br>
                <div class="row mb-5" id="jumbotron">
                    <div class="col-sm-12">
                      

                        <div class="jumbotron jumbotron-fluid">
                            <div class="container" id="problemDesc" >
                                <!-- <h2>题目标题:</h2> -->

                                <br>
                            </div>
                        </div>
                    </div>
                </div>

                    <!-- Forms  -->
                    <h2> 代码编辑框 </h2>
                    <div class="row mb-5" id="forms">
                        <div class="col-sm-12">
                          
    
                            <div class="row mt-4">
                                <div class="col-sm-12 pb-4">
        
                                    <form>
                                        <div class="form-group">
                                            <label for="codeEditor"></label>
                                            <div id="editor" style="min-height:400px">
                                                <textarea class="form-control" id="codeEditor" style="width: 100%;  height:400px;" ></textarea>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>



                <!-- Buttons  -->
                <div class="row mb-5" id="buttons">
                    <div class="col-sm-12">
                        <div class="row mt-4">
                            <div class="col-sm-6 pb-4" >
                                <button type="button" class="btn btn-primary" id="submitButton" >提交</button>
                            </div>
                        </div>
                    </div>
                </div>

              <!-- Jumbotron  -->
              <h2>结果展示</h2>
              <br>
              <br>
                <div class="row mb-5" id="jumbotron">
                    <div class="col-sm-12">
                      

                        <div class="jumbotron jumbotron-fluid">
                            
                            <pre>
                                <div class="container" id="problemResult">
                                 
                                    <p></p>
                                </div>


                            </pre>
                            
                            
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!--footer-->
        <section class="py-5 bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                        <!-- <h3>Upgrade to Pro Version</h3>
                        <p class="pt-2">
                            We are working on <b>Charcoal Pro</b> which will be released soon. The pro version 
                            will have a lot more components, sections, icons, plugins and example pages. 
                            Join the waiting list to get notified when we release it (plus discount code).
                        </p>
                        <a class="btn btn-warning" href="https://wireddots.com/newsletter">Join Waiting List</a>
                        <hr class="my-5"/> -->
                        <p class="pt-2 text-muted">
                           @  by  RAIN 7
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>

        <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ace.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/ace/1.2.9/ext-language_tools.js"></script>
        <script>


           //console.log(location.search);

           function initAce() {
               // 参数 editor 就对应到刚才在 html 里加的那个 div 的 id
                let editor = ace.edit("editor");
                editor.setOptions({
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true
                });

                editor.setTheme("ace/theme/twilight");
                editor.session.setMode("ace/mode/java");
                editor.resize();
                document.getElementById('editor').style.fontSize = '20px';
                return editor;
            }

            let editor = initAce();

            function getProblem(){
                  $.ajax({
                      url:"oj/problems"+location.search,
                      type:"GET",
                      success:function(data,status){
                          if(data.status===2000){
                              alert("输入的id非法!");
                          }
                         makeProblemDetail(data);
                      },
                      error:function () {
                         alert("服务器异常，获取题目信息失败!");
                      }
                  })
            }

            function makeProblemDetail(problem){
                  //1.获取到problemDesc，把题目详情写进去
                  let problemDesc = document.querySelector("#problemDesc");
                  let h4 = document.createElement("h4");
                  h4.innerHTML = problem.id+".&nbsp&nbsp&nbsp&nbsp"+problem.title+ "&nbsp&nbsp&nbsp&nbsp&nbsp"+problem.level+"<br><br><br>";
                  problemDesc.appendChild(h4);
                  
                  let p=document.createElement("p");
                  p.innerHTML=problem.description;
                  
                  
                //   problemDesc.appendChild(p);

                  let pre = document.createElement("pre");
                  problemDesc.append(pre);
                  pre.appendChild(p);

                  //2. 把代码的模板填写到代码编辑框中
                  let codeEditor = document.querySelector("#codeEditor");
                //   codeEditor.innerHTML = problem.templateCode;
                editor.setValue(problem.template)

                  //3. 给提交按钮注册一个点击事件

                  let submitButton = document.querySelector("#submitButton");
                  submitButton.onclick = function(){
                      // 点击这个按钮，就要进行提交（把编辑框的内容提交到服务器上）

                      let body = {
                        id:problem.id,
                        code:editor.getValue()
                      };

                      $.ajax({
                          url:"oj/compile",
                          type:"POST",
                          data:JSON.stringify(body),
                          contentType:"application/json;charset=utf8",
                          success: function(data,status){
                            let problemResult = document.querySelector("#problemResult");
                              if(data.error===0){
                                  // 编译没有问题
                                  problemResult.innerHTML = data.stdout;
                              }else{
                                  // 如果编译有问题，就把reason 写到显示界面上
                                  problemResult.innerHTML = data.reason;
                              }
                          },error:function (data,status) {
                              alert("服务器异常，提交失败!")
                          }
                      })
                  }

            }

            getProblem();


            function logout() {
                 $.ajax({
                     url:"state/logout",
                     type:"POST",
                     success:function (data,status) {
                        if(data.state===5001){
                            alert(data.message);
                        }else if(data.state===5002){
                            alert(data.message);
                            location.href="login.html";
                        }
                     }
                 })
            }

        </script>



    </body>
</html>
